<template>
    <div class="padding-blank">
        <div class="row history-title">
            <div class="row">
                <text class="text-main text">搜索历史</text>
            </div>
            <div class="row history-title-left" @click="deleteHistory">
                <text class="history-delete text">删除历史</text>
                <image class="delete text" :src="delete_icon"></image>
            </div>
        </div>
        <list>
            <cell v-for="item in searchHistory" @click="setInputValue(item)">
                <text class="history-text text">{{item}}</text>
            </cell>
        </list>
    </div>
</template>

<script>
    import { delete_icon } from '../../baseConfig';
    import { CLEAR_SEARCH_HISTORY  } from '../../store/mutations';

    const storage = weex.requireModule('storage');
    const modal = weex.requireModule('modal');
    export default {
        name: "history",
        props: {
            searchHistory: {
                type: Array,
                default: []
            },
        },
        data(){
            return {
                delete_icon: delete_icon,
                CLEAR_SEARCH_HISTORY: CLEAR_SEARCH_HISTORY,
            }
        },
        computed: {
        },
        methods: {
            deleteHistory(){
                this.CLEAR_SEARCH_HISTORY(this.searchHistory)
            },
            setInputValue(value){
                this.$emit('setInputValue', {value: value});
            }
        }
    }
</script>

<style scoped>

    .text{
        color: #666666;
    }
    .row{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .history {
        color: #666666;
    }


    .padding-blank {
        padding: 10px 10px 0 10px;
    }

    /* 搜索历史 */
    .history-title {
        justify-content: space-between;
        /*align-items: baseline;*/
        align-items: stretch;
    }
    .text-main {
        font-size: 42px;
    }

    .history-title-left {
        justify-content: center;
        align-items: center;
    }

    .delete {
        width: 28px;
        height: 28px;
        margin-left: 10px;
    }

    .history-text{
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 36px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #999999;
    }

</style>